@import "_m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3631103_yztr8wxsy3q.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        nav{
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            align-items: center;
            justify-content: space-between;
            .logo{
                width: getvw(123);
                height: getvw(123);
            }
            .search{
                position: relative;
                input{
                    width: getvw(265);
                    height: getvw(50);
                    border: 1px solid #ff9344;
                    border-radius: getvw(50);
                    font-size: getvw(24);
                    padding: 0 getvw(25);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(24);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .area{
                position: relative;
                select{
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(11);
                    top: 50%;
                    transform: translateY(-50%);
                    pointer-events: none;
                }
            }
        }
        .banner{
            .container {
                width: 100%;
                height: getvw(287);
                overflow: hidden;
                
                ul {
                    display: flex;
                    width: 300%;
                    // line-height: getvw(280);
                    animation: move 3s ease  infinite alternate;
                    li {
                        width: calc(100% / 3);
                        /* flex:1干了哪些事情 */
                        // flex: 1;
                        /* 清除列表前面的小圆点 */
                        list-style: none;
                        text-align: center;
                        img{
                            width: 100%;
                            display: block;
                        }
                      }
                  }
              }
            
              
              @keyframes move {
               from,16%{
                transform: translateX(0%);
               }
               50%,66%{
                transform: translateX(calc(-100% / 3));
               }
               84%,to{
                transform: translateX(calc(-100% / 3 * 2));
               }
            }
            .yuan{
                display: flex;
                align-items: center;
                align-items: flex-end;
                justify-content: center;
                justify-content: space-between;
                width: getvw(110);
                height: getvw(90);
                background-color: pink;
                margin: 0 auto;
                
                .yuan_in{
                    width: getvw(18);
                    height: getvw(18);
                    background-color: #ff9344;
                    border-radius: 50%;
                    opacity: 0.5;
                    :nth-of-type(1){
                        background-color:#ff9344 ;
                    }
                    :hover{
                        background: #000;
                    }
                }
            } 
        }                 
    }
    main{
        display: flex;
        justify-content: center;
        .nav{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                h1{
                    font-family: "宋体";
                    position: relative;
                    left: getvw(10);
                    
                }
                img{
                    width: getvw(56);
                    height: getvw(54);
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        
    }
    .box{
        width: getvw(590);
        height: getvw(220);
        // background-color: pink;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-content:space-between ;
        margin: 0 auto;
        img{
            position: relative;
            bottom: getvw(15);
            margin: getvw(10);
            width: getvw(241);
            height: getvw(97);
        }
    }
    .suki{
        display: flex;
        justify-content: center;
        .nav{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                h1{
                    font-family: "宋体";
                    position: relative;
                    left: getvw(10);
                }
                img{
                    width: getvw(55);
                    height: getvw(49);
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: getvw(24);
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
    }
    .boki{
        display: flex;
        width: getvw(717);
        height: getvw(360);
        // background-color: pink;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
        .left{
            display: flex;
            
            img{
                
                width: getvw(211);
                height: getvw(164);
            }
            .left_in{
                position: relative;
                left: getvw(20);
                line-height: getvw(40);
                h3{
                    font-size: 0.4133rem ;
                    color: #000;
                }
                p{
                    font-size: 0.3067rem;
                    color: grey;
                }
                span{
                    font-size: 0.3467rem;
                    color: #ff9344;
                }
            }
        }
        .right{
            
            p{
                font-size: .2933rem;
                line-height: getvw(60);
                :nth-of-type(1){
                    position: relative;
                    left: getvw(50);
                }
            }
        }
    }
    footer{ 
        width: 100%;
        position: fixed;
        background-color: #fff;
        .box{
            width: getvw(652);
            height: getvw(107);
            margin: 0 auto;
            // background-color: pink;
            display: flex;
            justify-content: space-between;
            .boxone{
                width: getvw(73);
                height: getvw(100);
                a{
                    color: #000;
                    text-decoration: none;
                }
                i{
                    
                    color: #ff9344;
                    font-size: getvw(73);
                }
                p{
                    font-size: .3467rem;
                    position: relative;
                    bottom: getvw(15);
                    left: getvw(10);
                }
            }
            
        }
    }
}